<template>
  <div class="task-form-container flex-col">
    <div class="title-warp flex-row-center">
      <div class="title">监测设置和告警设置</div>
      <div class="margin-left-24">
        <el-select
          v-model="form_type"
          placeholder="请选择"
          @change="onChangeType"
        >
          <el-option
            v-for="item in form_types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="form-item-warp flex-row-center margin-top-24">
      <div class="title">监控频率：</div>
      <div class="flex-row-center margin-left-24">
        <div
          class="margin-left-6"
          v-for="(item, index) in frequencys"
          :key="item.value"
          :class="[
            item.value === task_form.frequency
              ? 'option-item-active'
              : 'option-item',
          ]"
          :style="{ 'margin-left': index === 0 ? 0 : 6 }"
           @click="onChangeFrequency"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="form-item-warp flex-row-center margin-top-24">
      <div class="title">重试几次警告：</div>
      <div class="flex-row-center margin-left-24">
        <div
          class="margin-left-6"
          v-for="(item, index) in tryNumbers"
          :key="item.value"
          :style="{ 'margin-left': index === 0 ? 0 : 6 }"
          @click="onChangeTryNumber"
          :class="[
            item.value === task_form.tryNumber
              ? 'option-item-active'
              : 'option-item',
          ]"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="form-item-warp flex-row-center margin-top-24">
      <div class="title">MTR设置：</div>
      <div class="flex-col-center margin-left-24">
        <div class="flex-row-center">
          <div
            class="switch-item-left"
            :class="[MTR_on === 0 ? 'switch-item-active' : '']"
            @click="onChangeMtr"
          >
            关闭
          </div>
          <div
            class="switch-item-right"
            :class="[MTR_on === 1 ? 'switch-item-active' : '']"
             @click="onChangeMtr"
          >
            开启
          </div>
        </div>
        <div class="mtr-tip">
          当有监测点返回无法连接服务器、请求超时等网络故障时记录MTR快照。需要升级套餐，通过服务人员在套餐中打开此功能
        </div>
      </div>
    </div>
    <div
      class="form-item-warp flex-row-center margin-top-24"
      style="align-items: start"
    >
      <div class="title">快照记录高级规则：</div>
      <div class="flex-col-start margin-left-24">
        <div class="flex-row-center">
          <div
            class="switch-item-left"
            :class="[snapshot_log_setting_on === 0 ? 'switch-item-active' : '']"
             @click="onChangeMtr"
          >
            关闭
          </div>
          <div
            class="switch-item-right"
            :class="[snapshot_log_setting_on === 1 ? 'switch-item-active' : '']"
             @click="onChangeMtr"
          >
            开启
          </div>
        </div>
        <div class="margin-top-14" v-if="snapshot_log_setting_on === 1">
          <el-radio
            v-model="task_form.snapshot_log_setting"
            v-for="item in snapshot_log_settings_rules"
            :key="item.value"
            :label="item.value"
            @change="onChangeSettingRules"
            >{{ item.label }}</el-radio
          >
        </div>
      </div>
    </div>
    <div class="form-item-warp flex-row-center margin-top-24">
      <div class="title">自定义告警线：</div>
      <div class="margin-left-24">
        <el-button class="add-warm-btn">+ 添加自定义警告线</el-button>
      </div>
    </div>
    <div
      class="form-item-warp flex-row-center margin-top-24"
      style="align-items: start"
    >
      <div class="title">已添加自定义告警线：</div>
      <div class="margin-left-24">
        <el-table :data="cust_warm_lines" border style="width: 100%">
          <el-table-column prop="quota" label="指标" width="306" align="center">
          </el-table-column>
          <el-table-column prop="term" label="条件" width="122" align="center">
          </el-table-column>
          <el-table-column
            prop="topNum"
            width="122"
            label="阈值"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="开启状态"
            align="center"
            width="122"
          >
            <template v-slot:default="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="196">
            <template #default>
              <el-button
                type="text"
                style="color: #3d7ff1"
                size="small"
                @click="handleEdit"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: #ff615e"
                @click="handleDel"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div
      class="form-item-warp flex-row-center margin-top-24"
      style="align-items: start"
    >
      <div class="title">是否重定向：</div>
      <div class="flex-col-start margin-left-24">
        <div class="flex-col">
          <el-checkbox
            v-for="item in redirect_types"
            :key="item.value"
            :label="item.type + ' (' + item.value + ')'"
          ></el-checkbox>
        </div>
      </div>
    </div>
    <div class="bottom-line margin-top-40" />
    <div style="margin-top: 32px">
      <div class="tast-form-sub-btn" @click="onSubmit">保存以上设置为模板</div>
    </div>
  </div>
</template>
 
<script lang="ts">
import dayjs from "dayjs";
import { defineComponent } from "vue";
export default defineComponent({
  name: "TaskForm",
  components: {},
  data() {
    return {
      form_types: [
        { value: 1, label: "使用模板进行设置" },
        { value: 2, label: "使用其他进行设置" },
      ],
      form_type: 1,
      frequencys: [
        { value: 2, label: "2分钟" },
        { value: 5, label: "5分钟" },
        { value: 10, label: "10分钟" },
        { value: 15, label: "15分钟" },
        { value: 20, label: "20分钟" },
        { value: 30, label: "30分钟" },
        { value: 60, label: "60分钟" },
      ],
      tryNumbers: [
        { value: 1, label: "1次" },
        { value: 2, label: "2次" },
        { value: 3, label: "3次" },
      ],
      MTR_on: 0, //0关闭 1开启
      snapshot_log_setting_on: 1, //0关闭 1开启
      snapshot_log_settings_rules: [
        { value: 1, label: "记录故障频率的快照" },
        { value: 2, label: "记录所有监测频率的快照" },
      ],
      cust_warm_lines: [
        {
          id: 1,
          quota: "当前响应时间任意几个监测点[1]",
          term: "大于",
          topNum: "300ms",
          state: true,
        },
        {
          id: 2,
          quota: "当前响应时间任意几个监测点[2]",
          term: "大于",
          topNum: "300ms",
          state: true,
        },
        {
          id: 3,
          quota: "当前响应时间任意几个监测点[3]",
          term: "大于",
          topNum: "300ms",
          state: true,
        },
        {
          id: 4,
          quota: "当前响应时间任意几个监测点[4]",
          term: "大于",
          topNum: "300ms",
          state: true,
        },
      ],
      redirect_types: [
        { state: 1, type: "邮件", value: "2542517278@qq.com" },
        { state: 0, type: "短信", value: "17867933939" },
        { state: 0, type: "Telegram", value: null },
      ],
      task_form: {
        frequency: 2,
        tryNumber: 1,
        snapshot_log_setting_on: 1,
        snapshot_log_setting: 1,
        redirect_type: ["2542517278@qq.com"],
      },
    };
  },
  methods: {
    onChangeType() {},
    onChangeFrequency(){},
    onChangeTryNumber() {},
    onChangeMtr() {},
    onChangeLogSetting() {},
    onChangeSettingRules() {},
    handleDel() {},
    handleEdit() {},
    onSubmit(){}
  },
  created() {},
  beforeUnmount() {}
});
</script>
 
<style lang="scss">
.task-form-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 24px 30px;
  background: #ffffff;
}
.title-warp {
  .title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    width: 165px;
    text-align: left;
    // max-width:165px;
  }
}
.form-item-warp {
  .title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    text-align: left;
    width: 165px;
    // max-width:165px;
  }
  .right-warp {
  }
}
.option-item {
  width: 100px;
  height: 40px;
  background: #f5f7fd;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #415270;
  line-height: 40px;
  text-align: center;
}
.option-item-active {
  width: 100px;
  height: 40px;
  background: #3979e7;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}
.mtr-tip {
  margin-top: 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}
.switch-item-left {
  width: 100px;
  height: 40px;
  background: #f5f7fd;
  border-radius: 4px 0px 0px 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #415270;
  line-height: 40px;
  text-align: center;
}
.switch-item-right {
  width: 100px;
  height: 40px;
  background: #f5f7fd;
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #415270;
  line-height: 40px;
  text-align: center;
}
.switch-item-active {
  background: #3979e7;
  color: #ffffff;
}
.add-warm-btn {
  border-radius: 4px;
  border: 1px solid #3979e7;
}
.bottom-line {
  height: 0.5px;
  border-top: solid #e9e5e5 0.5px;
  background: #e9e5e5;
}
.tast-form-sub-btn {
  width: 313px;
  height: 40px;
  background: #3d7ff1;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  margin-left: 191px;
  margin-bottom: 38px;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
}
.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}
.margin-top-24 {
  margin-top: 24px;
}
.margin-top-40 {
  margin-top: 40px;
}
.margin-top-14 {
  margin-top: 14px;
}
.margin-left-24 {
  margin-left: 24px;
}
.margin-left-6 {
  margin-left: 6px;
}
</style>